<template>
  <div class="app-container">
    <div
      style="
        width: 100%;
        height: 5%;
        padding-left: 20px;
        padding-top: 20px;
        padding-bottom: 30px;
      "
    >
      <breadcrumb :naviItems.sync="naviItems"></breadcrumb>
    </div>
    <div class="filter-container">
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >
        新建
      </el-button>
      <el-button
        class="filter-item"
        type="danger"
        icon="el-icon-remove"
        @click="handleRemove"
      >
        删除
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 15px"
        type="info"
        icon="el-icon-refresh"
        @click="handleRefresh"
      >
        刷新
      </el-button>
    </div>
    <el-table
      ref="multipleTable"
      :data="list"
      stripe
      border
      tooltip-effect="light"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" type="selection" width="55" />
      <el-table-column v-if="false" align="center" prop="id" label="id" />
      <el-table-column
        align="center"
        prop="poolName"
        label="名称"
        width="250"
      />
      <el-table-column align="center" prop="type" label="类型" width="80" />
      <el-table-column align="center" prop="url" label="地址" width="180" />
      <el-table-column align="center" prop="description" label="描述" />
      <el-table-column
        align="center"
        prop="status"
        label="状态"
        width="55"
        :formatter="statusFormatter"
      />
      <el-table-column align="center" fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            @click="handleClick(scope.row, false)"
            >查看</el-button
          >
          <el-button
            type="text"
            size="mini"
            @click="handleClick(scope.row, true)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="handleRemove(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />

    <el-dialog
      :title.sync="dialogTitle"
      :visible.sync="dialogVisible"
      width="70%"
      align="center"
      :before-close="handleClose"
    >
      <el-container style="width: 85%">
        <el-form
          ref="item"
          :rules="rules"
          style="width: 100%"
          label-position="right"
          label-width="30%"
          :model="item"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item v-show="false" label="id">
                <el-input v-model="item.id" />
              </el-form-item>
              <el-form-item label="连接池名称" prop="poolName">
                <el-input
                  v-model="item.poolName"
                  maxlength="40"
                  :disabled="!dialogEdit"
                />
              </el-form-item>
              <el-form-item label="数据库类型" prop="type">
                <el-input
                  v-model="item.type"
                  maxlength="10"
                  :disabled="!dialogEdit"
                />
              </el-form-item>
              <el-form-item label="描述" prop="description">
                <el-input v-model="item.description" :disabled="!dialogEdit" />
              </el-form-item>
              <el-form-item label="数据库版本">
                <el-input
                  v-model="item.version"
                  maxlength="10"
                  :disabled="!dialogEdit"
                />
              </el-form-item>
              <el-form-item label="活动连接数">
                <el-input
                  v-model="item.activeCount"
                  maxlength="5"
                  type="number"
                  :disabled="!dialogEdit"
                />
              </el-form-item>
              <el-form-item label="空闲连接数">
                <el-input
                  v-model="item.freeCount"
                  maxlength="1000"
                  :disabled="!dialogEdit"
                />
              </el-form-item>
              <el-form-item label="最大连接数">
                <el-input
                  v-model="item.maxCount"
                  maxlength="5"
                  :disabled="!dialogEdit"
                />
              </el-form-item>
              <el-form-item label="最大等待时间">
                <el-input
                  v-model="item.maxAwaitCount"
                  maxlength="10"
                  :disabled="!dialogEdit"
                />
              </el-form-item>
              <el-form-item label="驱动类名">
                <el-input v-model="item.driverName" :disabled="!dialogEdit" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="URL地址" prop="url">
                <el-input
                  v-model="item.url"
                  maxlength="50"
                  :disabled="!dialogEdit"
                />
              </el-form-item>
              <el-form-item label="驱动版本">
                <el-input
                  v-model="item.driverVersion"
                  maxlength="20"
                  :disabled="!dialogEdit"
                />
              </el-form-item>
              <el-form-item label="驱动路径">
                <el-input v-model="item.driverUrl" :disabled="!dialogEdit" />
              </el-form-item>
              <el-form-item label="字符集">
                <el-input
                  v-model="item.charset"
                  maxlength="10"
                  :disabled="!dialogEdit"
                />
              </el-form-item>
              <el-form-item label="用户">
                <el-input
                  v-model="item.userName"
                  maxlength="20"
                  :disabled="!dialogEdit"
                />
              </el-form-item>
              <el-form-item label="自动提交">
                <el-input
                  v-model="item.autoCommit"
                  maxlength="5"
                  :disabled="!dialogEdit"
                />
              </el-form-item>
              <el-form-item label="日志级别">
                <el-input
                  v-model="item.logLevel"
                  maxlength="10"
                  :disabled="!dialogEdit"
                />
              </el-form-item>
              <el-form-item label="Jndi数据源名称">
                <el-input
                  v-model="item.jndiDsName"
                  maxlength="20"
                  :disabled="!dialogEdit"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-container>
      <span v-if="dialogEdit" slot="footer" class="dialog-footer">
        <el-button @click="handleRefreshRule('item')">取 消</el-button>
        <el-button type="primary" @click="handleConfirm('item')"
          >确 定</el-button
        >
      </span>
      <span v-else slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { page, addOrUpdate, removes } from "@/api/pool";
import { mapGetters } from "vuex";
import Breadcrumb from "../../../../components/QipingBreadCrumb/BreadCrumb.vue";
export default {
  name: "DbConnection",
  components: { Pagination, Breadcrumb },
  computed: {
    naviItems(){
      return [{ text: this.equTypeName }, { text: "数据测试" },{ text: "数据源" },{ text: "数据库连接池" }];
    },
    ...mapGetters(["equTypeName"]),
  },
  data() {
    return {
      total: 0,
      listLoading: true,
      selectionItem: [],
      dialogVisible: false,
      dialogTitle: "新增数据库连接池",
      dialogEdit: true,
      listQuery: {
        current: 1,
        size: 10,
        importance: undefined,
        title: undefined,
        type: undefined,
      },
      rules: {
        poolName: [
          {
            required: true,
            message: "请输入连接池名称",
            trigger: "blur",
          },
        ],
        url: [
          {
            required: true,
            message: "请输入URL地址",
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: "请输入数据库类型",
            trigger: "blur",
          },
        ],
      },
      list: [],
      item: {},
      backList: "",
    };
  },

  created() {
    this.getList();
  },

  methods: {
    getList() {
      this.listLoading = true;
      page(this.listQuery).then((response) => {
        this.list = response.data.records;
        this.total = response.data.total;

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });
    },

    /**
     * 单行编辑
     * @param row
     */
    handleClick(row, isEdit) {
      this.backList = JSON.stringify(this.list);
      this.item = row;
      this.dialogVisible = true;
      this.dialogTitle = row.poolName;
      this.dialogEdit = isEdit;
    },

    /**
     * 添加
     */
    handleCreate() {
      this.dialogVisible = true;
      this.dialogTitle = "新增数据库连接池";
      this.item = {};
      this.dialogEdit = true;
    },

    /**
     * 删除
     */
    handleRemove(index, row) {
      const data = [];
      if (row) {
        data.push(`ids=${row.id}`);
      } else {
        if (this.selectionItem.length < 1) return;
        this.selectionItem.forEach((item) => {
          data.push(`ids=${item.id}`);
        });
      }
      removes(data.join("&")).then((response) => {
        this.getList();
      });
    },

    /**
     * 刷新
     */
    handleRefresh() {
      this.getList();
    },

    /**
     * 多选行
     * @param rows
     */
    handleSelectionChange(rows) {
      this.selectionItem = rows;
    },

    /**
     * dialog关闭
     * @param formName
     */
    handleClose(formName) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.dialogVisible = false;
          this.list = JSON.parse(this.backList);
          this.$refs["item"].resetFields();
        })
        .catch((_) => {});
    },

    handleConfirm(formName) {
      this.listLoading = true;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addOrUpdate(this.item)
            .then()
            .then((response) => {
              this.dialogVisible = false;
              this.getList();

              // Just to simulate the time of the request
              setTimeout(() => {
                this.listLoading = false;
              }, 1.5 * 1000);
            });
        } else {
          return false;
        }
      });
    },

    statusFormatter(row, column, cellValue, index) {
      switch (cellValue) {
        case "1":
          return "在用";
        case "0":
          return "禁用";
      }
    },

    handleRefreshRule(formName) {
      this.dialogVisible = false;
      this.list = JSON.parse(this.backList);
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
</style>
